<template>
	<view class="page"
		:style="{height: bg.height + 'rpx'}"
	>
		<!-- <image 
			class="page-bg" 
			src="@/static/img/IMG_375.jpg" 
			mode="scaleToFill"></image> -->
		
		<view class="notice-box">
			<u-notice-bar :text="notice" :icon="''" fontSize="16" bgColor="rgb(254, 252, 239)" speed="40"></u-notice-bar>
		</view>
		<view class="time-box">
			{{time}}
		</view>
	</view>
</template>

<script>
	import bg from '@/static/img/IMG_375.jpg';
	import moment from 'moment';
	
	export default {
		data() {
			return {
				bg: {},
				notice: '若您有近7天中高风险地区旅居史(含境外)请及时信息更新和风险报备。',
				time: moment().format('MM-DD HH:mm:ss'),
				timer: null
			}
		},
		onLoad() {
			let that = this;
			uni.getImageInfo({
			    src: bg,
			    success: function (image) {
					that.bg = image;
			    },
			});
			this.timer = setInterval(() => {
				this.time = moment().format('MM-DD HH:mm:ss')
			},1000)
		},
		onUnload() {
			clearInterval(this.timer);
		},
		methods: {

		}
	}
</script>

<style>
	.page {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
	}
	
	.page-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	
	.notice-box {
		position: absolute;
		top: 430rpx;
		left: 0;
		right: 0;
		height: 100rpx;
		z-index: 3;
	}
	
	.time-box {
		position: absolute;
		top: 600rpx;
		left: 0;
		right: 0;
		height: 120rpx;
		z-index: 3;
		font-size: 77rpx;
		font-weight: bold;
		text-align: center;
		background-color: #fff;
		margin: 0 30rpx;
	}
	
	scroll-view ::-webkit-scrollbar {  
		display: none !important;  
		width: 0 !important;  
		height: 0 !important;  
		-webkit-appearance: none;  
		background: transparent;  
	}
	
	::-webkit-scrollbar{
		  display: none;
	}

</style>
